<template>
  <div>
    <a-card :title="title" :bordered="bordered" :loading="loading" :hoverable="hoverable">
      <div @click="Change(iconSetting.tooltipText)" slot="extra" v-if="icon">
        <a-tooltip :placement="iconSetting.tooltipPosition">
          <template slot="title">
            <span>{{iconSetting.tooltipText}}</span>
          </template>
          <a-icon
            :type="iconSetting.type"
            :style="{fontSize:iconSetting.fontSize+'px',color:iconSetting.fontSize}"
          />
        </a-tooltip>
      </div>
      <div @click="Change()" v-if="extra" slot="extra" style="fontSize:15px">{{extra}}</div>
      <slot name="content"></slot>
      <template class="ant-card-actions" slot="actions">
        <slot name="actions"></slot>
      </template>
    </a-card>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "orhon-card"
})
export default class OrhonCard extends Vue {
  @Prop({ type: String }) title?: String;
  @Prop({ type: Boolean, default: true }) bordered!: Boolean;
  @Prop({ type: Boolean, default: true }) hoverable!: Boolean;
  @Prop({ type: String }) extra?: String;
  @Prop({ type: Boolean }) icon?: Boolean;
  @Prop({ type: Object }) iconSetting?: Object;
  @Prop({ type: Boolean, default: false }) loading?: Boolean;
  @Emit("Change")
  Change(n: string) {}
}
</script>
<style lang="less" scoped>
</style>